<template>
  <div class="goodsInfo">
    <div class="nav-bar">
      <van-nav-bar
        title="商品详情"
      />
    </div>
    <div class="goodsImg">
      <img :src="goodsInfo.IMAGE1" width="300px" :onerror="errorImg"/>
      <div class="good">
        <div class="goods-name">{{ goodsInfo.NAME }}</div>
        <div class="goods-price">
          现价：{{ goodsInfo.PRESENT_PRICE | toMoney }}元
        </div>
        <div class="shopCar">
        <div @click="addGoodsTOCart">
          <van-button size="large" type="primary">加入购物车</van-button>
        </div>
        <div @click="dialogVisible = true">
          <van-button size="large" type="danger">直接购买</van-button>
        </div>
      </div>
      </div>
    </div>
    
    <div>
      <van-tabs animated swipeable>
        <van-tab title="商品详情">
          <div v-html="goodsInfo.DETAIL"></div>
        </van-tab>
        <van-tab title="评论">
          <div class="comment">
            <div class="data" v-for="(item,index) in commentArray" :key="index">
              <div class="person">
                {{item.username}}
              </div>
              <div class="person-word">
                <div class="floor">第{{commentArray.length - index}}楼</div>
                <div class="word">{{item.comment}}</div>
              </div>
            </div>
            <div class="comment_input">
              <el-input
                type="textarea"
                placeholder="请输入您的评论"
                resize="none"
                v-model="textarea"
                maxlength="30"
                show-word-limit
              >
              </el-input>
              <div style="height:10px;"></div>
              <van-button size="small" type="primary" @click="comment()">发表评论</van-button>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="click_close"
      >
      <span>确定直接购买吗？</span>
      <div class="buyOne">
        <div class="buyImg">
          <img :src="Info.images" width="100px">
        </div>
        <div class="describe">
          <div>{{this.Info.goodsName}}</div>
          <div>单价：{{this.Info.price}}元</div>
          <div>购买一份</div>
          <div>总价：{{this.Info.price}}元</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="buyDirectly()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="commentSend"
      width="30%"
      :close-on-click-modal="click_close"
      >
      <span>评论提交成功</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commentSend = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import url from "@/serviceAPI.config.js";
import { Toast } from "vant";
import { toMoney } from "@/assets/js/filter.js";
import { mapState } from "vuex";
export default {
  name: "goodsDetailInfo",
  data() {
    return {
      goodsId: "",
      goodsInfo: {},
      dialogVisible: false,
      textarea: '',
      click_close: false, // 是否点击遮罩层关闭对话框
      commentSend: false, // 显示评论提交成功对话框
      commentArray: [],// 评论数组数据
      Info: {},
      errorImg: 'this.src="' + require('@/assets/image/errorimg.png') + '"'
    };
  },
  filters: {
    toMoney(money) {
      return toMoney(money);
    }
  },
  computed: {
    ...mapState(['DSuser'])
  },
  created() {
    // 获取到路由传递过来的 商品 id
    this.goodsId = this.$route.query.goodsId
      ? this.$route.query.goodsId
      : this.$route.params.goodsId;
    console.log(this.goodsId);
    this.getInfo();
  },
  methods: {
    // 提交评论
    comment(){
      console.log(this.textarea);
      axios({
        url: url.comment,
        method: 'post',
        data: {
          goodsId: this.goodsId,
          comment: this.textarea,
          goodsName: this.goodsInfo.NAME
        }
      }).then(res => {
        // console.log(res);
        this.$message(res.data.message);
        // 提交评论后再获取一次评论数据
        axios({
          url: url.getComment,
          method: 'post',
          data: {
            goodsId: this.goodsId
          }
        }).then(res =>{
          console.log(res);
          this.commentArray = res.data.comment;
        })
      })
    },
    getInfo() {
      console.log("开始获取商品信息");
      axios({
        url: url.getDetailGoodsInfo,
        method: "post",
        data: { goodsId: this.goodsId }
      })
        .then(res => {
          if (res.data.code === 200 && res.data.message) {
            this.goodsInfo = res.data.message;
            console.log('商品详情');
            console.log(this.goodsInfo);
            this.Info = {
              goodsId: this.goodsInfo.ID,
              goodsName: this.goodsInfo.NAME,
              count: 1,
              price: this.goodsInfo.PRESENT_PRICE,
              images: this.goodsInfo.IMAGE1
            };
            // 获取评论
            axios({
              url: url.getComment,
              method: 'post',
              data: {
                goodsId: this.goodsId
              }
            }).then(res =>{
              console.log(res);
              this.commentArray = res.data.comment;
            })
          } else {
            Toast("获取数据失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
      
    },
    // 增加商品到购物车
    addGoodsTOCart() {
      // 取出本地 localStorage 中的数据
      let cartInfo = localStorage.cartInfo
        ? JSON.parse(localStorage.cartInfo)
        : [];
      // 根据 ID 看此时购物车中有没有已经添加过同样的商品
      let isHaveGoods = cartInfo.find(cart => cart.goodsId === this.goodsId);
      // 如果没有就加入购物车
      if (!isHaveGoods) {
        this.$store.commit("changeCartNumber");
        let newGoodsInfo = {
          goodsId: this.goodsInfo.ID,
          name: this.goodsInfo.NAME,
          price: this.goodsInfo.PRESENT_PRICE,
          image: this.goodsInfo.IMAGE1,
          count: 1
        };
        cartInfo.push(newGoodsInfo);
        localStorage.cartInfo = JSON.stringify(cartInfo);
        this.$message.success("加入购物车成功");
      } else {
        this.$message.warning("购物车已有此商品");
      }
    },
    // 点击直接购买
    buyDirectly() {
      let cart = [];
      cart.push(this.Info);
      console.log(cart);
      this.dialogVisible = false;
      axios({
        url: url.postCart,
        method: 'post',
        data:{
          userName: this.DSuser.name,
          cart: cart
        }
      }).then(res => {
        if(res.data.code == 200){
          this.$message.success(res.data.message);
        }else {
          this.$message.error(res.data.message);
        }
      })
      
    },
  }
};
</script>

<style scoped>
.goodsInfo {
  padding-bottom: 3.5rem;
  width: 1226px;
  margin: 0 auto;
}
.good {
  display: inline-block;
  vertical-align: top;
  margin-left: 180px;
}
.goods-name,
.goods-price {
  /* display: inline-block; */
  margin-bottom: 40px;
  background-color: #fff;
  font-size: 1rem;
  text-align: center;
}
.shopCar {
  width: 100%;
  height: 3.5rem;
  margin-top: 100px;
  background-color: #fff;
  display: flex;
  flex-flow: nowrap;
}
.shopCar > div {
  flex: 1;
  border-radius: 2rem;
  padding: 0.2rem;
}
.comment {
  position: relative;
  padding-left: 10px;
  padding-top: 10px;
}
.comment_input {
  margin-top: 10px;
}
.data {
  display: flex;
  margin-bottom: 5px;
}
.person {
  width: 100px;
  /* background-color: red; */
  font-size: 22px
}
.floor {
  font-size: 22px;
  margin-left: 50px;
}
.word {
  flex: 1;
  /* background-color: blue; */
  font-size: .8rem;
  padding-left: 50px;
  padding-top: 20px;
}
.textarea {
  border: 1px solid #ccc;
  resize: none;
  width: 800px;
  font-size: 22px;
  height: 100px;
  font-weight: 300;
  margin-left: 200px;
}
.buyOne {
  display: flex;
  margin-top: 10px;
}
.describe {
  display: inline-block;
}
.describe div {
  margin-bottom: 12px;
}
.buyImg {
  display: inline-block;
}
</style>
